
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">

  <title>자기소개서</title>
  <style>
  #form_main{
 	background-color : #b1c8c7;
  	font-family: NanumGothic, sans-serif;
  }
  	#theme{
  		position: relative;
  		width:350px;
  		border: 4px dotted #ffffff;
  		border-radius:30px;
  		margin:0 auto;
  		z-index:5;
  		padding-left:40px;
  		padding-right:40px;
  		font-weight:bolder;
  		color: #4C4C4C;
  	}
  	#theme::before{
  		position: absolute;
  		content:"";
  		z-index:-1;
  		top: 0;
  		bottom: 0;
	    left: 0;
	    right: 0;
	    background-image: url(./images/pattern3.png);
	    opacity: .3;
  		
  		margin:0 auto;
  	}
  	.btn {
  		border-radius:10px;
  		//height:30px;
  	}
  	.thumb {
	    height: 75px;
	    border: 1px solid #000;
	    margin: 10px 5px 0 0;
  	}
  </style>
  <script>
  	window.onload = function(){
		var b = document.getElementById("btnChk");
		b.onclick = function(){
			var ch = document.frm;
			var str = "";
			str += "아이디 : " + ch.id.value + "\n";
			str += "비  번 : " + ch.pwd.value + "\n";
			str += "주  소 : " + ch.addr.value + "\n";
			str += "핸드폰 : " + ch.phone.value + "\n";
			
			for(var i=0; i<ch.gender.length; i++){
				if(ch.gender[i].checked){
					str += "성  별 : " + ch.gender[i].value + "\n";
				break;
				}
			}
			// hobby
			str += "취  미 : ";
			temp = new Array();
			pos=0;
			for(var i=0; i<ch.hobby.length; i++){
				
				if(ch.hobby[i].checked){
					
					temp[pos] = ch.hobby[i].value;
					pos++;
					//str += "Hobby : " + ch.hobby[i].value + "\n";
					//break;
				}
			}
			str += temp + "\n";
			
			str += "나  이 : " + ch.age.value + " 살 \n";
			str += "건강도 : " + ch.healthy.value + " 퍼센트 \n";
			str += "생  일 : " + ch.birthday.value + "\n";
			str += "생  시 : " + ch.birthtime.value + "\n";
			
			str += "Study : " + ch.study[ch.study.selectedIndex].text + "\n";
			
			ch.result.value = str;
		}
	} 
	
	function onFileSelected(event) {
	  var selectedFile = event.target.files[0];
	  var reader = new FileReader();
	
	  var imgtag = document.getElementById("myimage");
	  imgtag.title = selectedFile.name;
	
	  reader.onload = function(event) {
	    imgtag.src = event.target.result;
	  };
	
	  reader.readAsDataURL(selectedFile);
	}
  </script>
</head>

<body>
<div id="form_main">
	<div id="theme">
		<h1 style="text-align: center; color:#4374D9; text-outline: 2px white;">자 기<sub style="font-size: 15px;">야</sub> 소 개 서</h1>
	<form name="frm" action="" method="post">
		프로필사진 선택
		<input type="file" id="files" onchange="onFileSelected(event)">
		<img id="myimage" width="200" style="border: 1px solid white;">
		<!-- <center><img src="..\images\logo.jpg" width="20%"></center><br/><br/>--></br/>
		이&emsp;&emsp;름&emsp;<input type="text" name="id" value="안소희"><br/>
		비밀&thinsp;번호&emsp;<input type="password" name="pwd" value="1234567"><br/>
		주&emsp;&emsp;소&emsp;<input type="text" name="addr" value="서울시 동대문구 이문동"><br/>
		전화&thinsp;번호&emsp;<input type="text" name="phone" value="010 - 1234 - 5678"><br/>
		<p/>
		성별&thinsp;선택&emsp;[
		<label><input type="radio" name="gender" value="남자" />남자</label>
		<label><input type="radio" name="gender" value="여자" />여자</label>
		<label><input type="radio" name="gender" value="엄마는 외계인" />고민중</label> ]<p/>
		취미&thinsp;선택&emsp;[
		<label><input type="checkbox" name="hobby" value="독서" />독서</label>
		<label><input type="checkbox" name="hobby" value="당구" />당구</label>
		<label><input type="checkbox" name="hobby" value="등산" />등산</label>
		<label><input type="checkbox" name="hobby" value="포샵" />포토샵</label> ]
		<br/><br/>
		


		<p/>
		
		<form name="frm2" action="" method="post">
			나&emsp;&emsp;이&emsp;
			<input type="number" name="age" min="1" max="200" value="23"> 살<br/>
			체&emsp;&emsp;력&emsp;
			<input type="range" name="healthy" min="0" max="100" value="100" step="10"> 퍼센트<br/>
			생&emsp;&emsp;일&emsp;
			<input type="date" name="birthday" value="1992-06-27" /><br/>
			출생&thinsp;시간&emsp;
			<input type="time" name="birthtime" value="22:24:03"/><br/>
			선호&thinsp;색깔&emsp;
			<input type="color"/><p/>
			
			커리&thinsp;큘럼&emsp;
			<select name="study">
				<optgroup label="Java">
					<option>자바 개론</option>
					<option>변수 상수</option>
					<option>for문 돌리기</option>
					<option>While문 안에서 놀기</option>
				</optgroup>
				<optgroup label="HTML">
					<option>태그의 종류</option>
					<option>HTML5의 특징</option>
					<option>웹표준과 접근성</option>
				</optgroup>
				<optgroup label="Ajax">
					<option>JavaScript</option>
					<option>XMLHttpRequest</option>
					<option>Suggest 기능 구현</option>
				</optgroup>
			</select>
		<p/>
		
		<textarea rows="10" cols="38" id="result" name="result"></textarea>
		<p/>
		<input type="button" value="확인하기" class="btn" id="btnChk" />

		</form>
		
		
		모든 정보가 올바르면 전송해주세요 ^^&emsp;
		<input type="button" class="btn" value="전송" />
		
	</form> 
	<br/>
	<br/>
	<hr/>
	<br/>
	추가 전달사항은
		<input type="email" size="15" name="email" value="wlgnsdi@paran.com"> 으로 보내주세요.
		<p/>
		<textarea rows="5" cols="38"></textarea>
	</div>
</div>
</body>
</html>
